<template>
  <div class="team-members-wrap">
      <el-page-header class="team-members-header" @back="goBack" :content="teamName"></el-page-header>
      <el-table :data="memberList">
        <el-table-column property="user_name" label="姓名"></el-table-column>
        <el-table-column property="modified_on" label="加入时间" :formatter="formatterTime"></el-table-column>
        <el-table-column property="user_msg" label="请求描述"></el-table-column>
        <el-table-column property="is_active" label="是否同意"></el-table-column>
        <el-table-column align="right" width="200px">
          <template #default="scope">
            <el-button
            v-if="!scope.row.is_active"
            size="mini"
            @click="agreeJoin(scope.$index, scope.row)">同意加入</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleRemoveUser(scope.$index, scope.row)">移除用户</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      class="page-wrap"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import api from '../../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const teamId = ref(1)
        const teamName = ref('')
        watchEffect(() => {
            if (JSON.stringify(route.params) === "{}") return
            teamId.value = parseInt(route.params.id)
            teamName.value = route.params.name
            getList()
        })
        // 成员列表
        const memberList = ref([])

        // 获取成员列
        async function getList (params) {
            const res = await api.getMemberList({team_id: teamId.value, ...params})
            if (res.data.code === 200) {
                memberList.value = res.data.data.list
                totalCount.value = res.data.data.pager.total_rows
            } else {
                ElMessage.error('获取成员列表失败：' + res.data.msg)
            }
        }

        // 同意加入团队
        async function agreeJoin (index, row) {
            const res = await api.agreeUserTeam({id: row.id})
            if (res.data.code === 200) {
                ElMessage.success({
                    message: '添加成功',
                    type: 'success'
                })
                getList()
            } else {
                ElMessage.error('同意成员加入失败：' + res.data.msg)
            }
        }


        // 移除该用户
        async function handleRemoveUser(index, row) {
            ElMessageBox.confirm('此操作将永久移除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await removeUser(row.id)
            }).catch(() => {
                ElMessage({
                type: 'info',
                message: '已取消移除'
                })
            })
        }
        async function removeUser (id) {
            const res = await api.removeUserTeam({id: id})
            if (res.data.code === 200) {
                ElMessage.success({
                    message: '移除成功',
                    type: 'success'
                })
                getList()
            } else {
                ElMessage.error('移除失败：' + res.data.msg)
            }
        }


        function goBack() {
            router.push({ name: 'MyTeam' })
        }

        // 分页相关
        const currentPage = ref(1)
        const totalCount = ref(0)
        const pageSize = ref(10)
        function handleSizeChange (val) {
            console.log(`每页 ${val} 条`)
            getList({ pageindex: currentPage.value, pagesize: val })
        }
        function handleCurrentChange (val) {
            console.log(`当前页: ${val}`)
            getList({ page: val, page_size: pageSize.value })
        }

        // // 超过一页就隐藏分页插件
        // const hideOnSinglePage = computed(() => {
        //     return totalCount.value <= 10
        // })

        // 格式化时间
        function formatterTime(row, column, cellValue) {
            return new Date(cellValue).toLocaleString()
        }
        return {
            teamName,
            memberList,
            goBack,
            // hideOnSinglePage,
            handleSizeChange,
            handleCurrentChange,
            currentPage,
            totalCount,
            teamId,
            agreeJoin,
            handleRemoveUser,
            formatterTime
        }
    }
}
</script>

<style lang="scss" scoped>
    .team-members-wrap{
        width: 100%;
        min-width: 500px;
        .team-members-header{
            margin-bottom: 20px;
        }
    }
</style>